<template>
    <div>
        <v-button @click="n=1" :class="[n==1?'active':'']">热门推荐</v-button>
        <v-button @click="n=2" :class="[n==2?'active':'']">新品推荐</v-button>
        <v-button @click="n=3" :class="[n==3?'active':'']">所有商品</v-button>
        <ul v-show="n==1">
            <li v-for="item in arr[0]" :key="item.id">
                <div v-for="i in item" :key="i.id" class="text" @click="$router.push('/list?id=' + i.id)">
                    <div><img :src="$pre + i.img" alt=""></div>
                    <div>
                        <p>{{i.goodsname}}</p>
                        <p>现价格：{{i.price}}</p>
                        <p>原价格：{{i.market_price}}</p>
                    </div>
                </div>
            </li>
        </ul>
        <ul v-show="n==2">
            <li v-for="item in arr[1]" :key="item.id">
                <div v-for="i in item" :key="i.id" class="text" @click="$router.push('/list?id=' + i.id)">
                    <div><img :src="$pre + i.img" alt=""></div>
                    <div>
                        <p>{{i.goodsname}}</p>
                        <p>现价格：{{i.price}}</p>
                        <p>原价格：{{i.market_price}}</p>
                    </div>
                </div>
            </li>
        </ul>
        <ul v-show="n==3">
            <li v-for="item in arr[2]" :key="item.id">
                <div v-for="i in item" :key="i.id" class="text" @click="$router.push('/list?id=' + i.id)">
                    <div><img :src="$pre + i.img" alt=""></div>
                    <div>
                        <p>{{i.goodsname}}</p>
                        <p>现价格：{{i.price}}</p>
                        <p>原价格：{{i.market_price}}</p>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
    import { reqhomegoods } from "../../../http/http";

    export default{
        data(){
            return{
                arr:[],
                n:1
            }
        },
        mounted(){
            reqhomegoods({}).then((res)=>{
                console.log(res);
                this.arr = res.data.list;
            })
        }
    }
</script>
<style scoped>
    .btn{
        margin: 0.1rem 0.3rem;
    }
    .active{
        background-color: #0099ff;
    }
    ul{
        margin-bottom: 1.2rem;
    }
    .text{
        width: 2.5rem;
        height: 4rem;
        display:inline-block;
        margin:0.5rem 0.3rem 0 0.7rem;
    }
    ul img{
        width: 2.5rem;
        height: 2.5rem;
    }
</style>